<template>
  <div class="administrator">
    <mains :title="'管理员管理'">
      <template #btn>
        <Button type="primary" ghost class="del">删除</Button>
        <Button type="primary" @click="goAddAdmin('')">新增管理员</Button>
      </template>
      <template #content>
        <Card>
          <!-- 搜索区域 -->
          <div class="search-box">
            <Input v-model="txt" placeholder="请输入账号" style="width: 300px" class="inp" />
            <Button type="primary" @click="search">搜索</Button>
          </div>
          <!-- 表格 -->
          <tables
            ref="selection"
            :columns="columns"
            :data="data"
            @edit="goAddAdmin"
            @remove="remove"
          ></tables>
          <!-- 分页 -->
          <pages
            :total="total"
            :pageSize="pageSize"
            :curentPage="pageNum"
            @pageChange="pageChange"
            @pageSizeChange="pageSizeChange"
          />
        </Card>
      </template>
    </mains>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import pages from '@/components/pageNation.vue'
import tables from '@/components/systemTable.vue'
import { ref, onMounted,onBeforeUnmount } from 'vue'
import { Modal } from 'view-ui-plus'
import { useRouter } from 'vue-router'
import { getAdminList, deleteAdmin } from '@/api/systemApi/adminApi'
const router = useRouter()

const txt = ref('')
const columns = ref([
  {
    type: 'selection',
    width: 60,
    align: 'center',
  },
  {
    title: '用户名',
    key: 'username',
    align: 'center',
  },
  {
    title: '账号',
    key: 'account',
    align: 'center',
  },
  {
    title: '角色',
    key: 'role',
    align: 'center',
  },
  {
    title: '手机号码',
    key: 'tel',
    align: 'center',
  },
  {
    title: '是否启用',
    slot: 'content',
    align: 'center',
  },
  {
    title: '添加时间',
    key: 'time',
    align: 'center',
  },
  {
    title: '操作',
    slot: 'action',
    width: 150,
    align: 'center',
  },
])
const data = ref([])

// 分页
const total = ref(100) // 总条数
const pageSize = ref(10)
const pageNum = ref(1)

// 获取数据
const getAdminLists = async () => {
  const res = await getAdminList({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  })
  if (res.code == 200) {
    data.value = res.data.list
    total.value = res.data.total
  }
}

// 搜索事件
const search = () => {
  if(data.value.length == 0){
    getAdminLists()
  }
  data.value = data.value.filter((item) => {
    return item.account == txt.value
  })
  txt.value = ''
  total.value = data.value.length
}

// 分页改变事件
const pageChange = (page) => {
  pageNum.value = page
  getAdminLists()
}
// 每页条数改变事件
const pageSizeChange = (val) => {
  pageSize.value = val
  getAdminLists()
}
onMounted(() => {
  getAdminLists()
})

const goAddAdmin = (id) => {
  router.push({
    path: '/home/addAdmin',
    query: {
      id,
    },
  })
}
// 删除
const remove = (id) => {
  Modal.confirm({
    title: '确认删除',
    content: '<p>确定要删除这条数据吗？</p>',
    onOk: async () => {
      const res = await deleteAdmin({
        id,
      })
      // console.log('删除', res)
      if (res.code == 200) {
        getAdminLists()
      }
    },
    onCancel: () => {
      // console.log('用户点击了取消')
      return false
    },
  })
}
// 销毁所有事件
onBeforeUnmount(() => {
  window.removeEventListener('getAdminLists', getAdminLists)
  window.removeEventListener('pageChange', pageChange)
  window.removeEventListener('pageSizeChange', pageSizeChange)
})
</script>

<style>
.administrator {
  .del {
    margin-right: 10px;
  }
  .search-box {
    .inp {
      margin-right: 10px;
    }
  }
}
</style>
